<template>
    <div class="regiser">
        <div class="reg_cen">
            <div class="regiser_lef">
                <span class="spa">注册时间</span>
                <el-config-provider :locale="locale">
                    <el-date-picker v-model="value" command="zh" type="daterange" start-placeholder="开始时间"
                        end-placeholder="结束时间" :default-time="defaultTime" range-separator="至" format="YYYY-MM-DD"
                        :locale="locale" />
                </el-config-provider>
            </div>
            <div class="regiser_rig">
                <span>手动搜索</span>
                <div class="inp_w">
                    <el-input v-model="input" placeholder="请输入学员ID、昵称、手机号" />
                </div>
            </div>
            <div class="register_sear">
                <el-button type="success" color="#2bc17b" style="color: #fff;width:76px;height:40px">搜索</el-button>
            </div>
            <div class="register_reset">
                <el-button style="color: #2bc17b;border:1px solid #2bc17b;width:76px;height:40px">重置</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
const value = ref('')
const input = ref('')
let locale = ref(zhCn)

const defaultTime = ref < [Date, Date] > ([
    new Date(2000, 1, 1, 0, 0, 0),
    new Date(2000, 2, 1, 23, 59, 59),
])
</script>

<style lang="less" scoped>
* {
    font-size: 14px;
}

.regiser {
    width: 100%;
    height: auto;
    background: #fff;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .reg_cen {
        width: 1184px;
        height: 100%;
        padding: 35px 0;
        box-sizing: border-box;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        .spa {
            padding-right: 20px;
        }

        .regiser_rig {
            width: 420px;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .inp_w {
                width: 344px;
            }
        }
    }
}
</style>